<template>
	<view class="form">
		<u-form :model="form" ref="uForm" label-width="140rpx">
			<u-form-item label="姓名" :required='true' prop="name">
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="手机号" :required='true' prop="phone">
				<u-input v-model="form.phone" />
			</u-form-item>
			<u-form-item label="邮箱" :required='true' prop="email">
				<u-input v-model="form.email" />
			</u-form-item>
			<u-form-item label="身份证号" :required='true' prop="idCard">
				<u-input v-model="form.idCard" />
			</u-form-item>
			<u-form-item label="密码" :required='true' prop="password">
				<u-input v-model="form.password" type="password" />
			</u-form-item>
		</u-form>
		<u-button class="btn" @click="submit">提交</u-button>
	</view>
</template>

<script>
	import rules from '@/mixin/rules.js'
	export default {
		mixins: [rules],
		data() {
			return {
				form: {
					name: '',
					intro: '',
				},

			};
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	};
</script>
<style scoped lang="scss">
	.form {
		padding: 30rpx;
	}
	.btn{
		margin-top: 60rpx;
	}
</style>
